<template>
    <div id="container">
        <div id="header_login">
            <strong style="font-size:30px">欢迎 <span style="font-size:35px;color:#409EFF">注册</span>
                ！!</strong><br><br><br>
            已有账号？
            <el-button type="text" @click="() => $router.push('/login')">去登录</el-button>
        </div>
        <el-form label-width="80px" :model="REGISTER" :rules="rules" style="width:400px" ref="register_ref"
            id="register_ref">
            <el-form-item label="账号" prop="account">
                <el-input placeholder="请输入账号" suffix-icon="el-icon-user" v-model="REGISTER.account" clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入密码" suffix-icon="el-icon-lock" v-model="REGISTER.password" clearable
                    show-password>
                </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="comfirm_password">
                <el-input placeholder="请确认密码" suffix-icon="el-icon-lock" v-model="REGISTER.comfirm_password" clearable
                    show-password>
                </el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input placeholder="请输入姓名" suffix-icon="el-icon-user" v-model="REGISTER.name" clearable>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="register()" class="register-btn" :loading="loading">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {

    data() {
        let comfirm_password_validator = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.REGISTER.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };

        return {
            // 表单项
            REGISTER: {
                account: '',
                password: '',
                comfirm_password: '',
                name: ''
            },

            // 验证规则
            rules: {
                account: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                    {
                        min: 5,
                        max: 20,
                        message: "长度在 5 到 20 个字符",
                        trigger: "blur",
                    },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 6, message: "至少 6 位", trigger: "blur" },
                ],
                comfirm_password: [
                    { validator: comfirm_password_validator, trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入姓名", trigger: "blur" },
                    {
                        min: 1,
                        max: 10,
                        message: "长度在 1 到 10 个字符",
                        trigger: "blur",
                    },
                ],
            },
            loading: false
        }
    },


    created() {

    },
    methods: {

        // 注册
        async register() {
            this.loading = true
            this.$refs.register_ref.validate(async v_res => {
                if (!v_res) return
                else {
                    try {
                        const res = await this.$http.post("/user/register", {
                            account: this.REGISTER.account,
                            password: this.$md5(this.REGISTER.password),
                            name: this.REGISTER.name
                        });
                        console.log(res)
                        if (res.data.code === 2000 && res.data.data === 1) {
                            this.$message.success('成功')
                            this.loading = false
                            this.$router.push('/login')
                        } else if (res.data.data === 0) {
                            this.$message.error('账号已存在')
                        } else {
                            this.$message.error('失败')
                        }
                    } catch (error) {
                        // console.log(error);
                    }
                }
            })

            this.loading = false

        },
    }
}
</script>

<style lang="less" scoped>
#container {
    padding: 1vi;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    .el-form {
        margin-top: 1vi;
        margin-left: 1vi;

        .el-button {
            width: 50%;
        }
    }
}
</style>